<template>
  <div class = "box">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="login-box">
        <h3 class="login-title">欢迎注册</h3>
		<el-form-item label="用户名" prop="name"><el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input></el-form-item>
        <el-form-item
            prop="email"
            label="邮箱"
            :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ]"
        >
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
		<el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off" placeholder="请输入密码"></el-input></el-form-item>
		<el-form-item label="确认密码" prop="checkPass"><el-input type="password" placeholder="请再次输入密码" v-model="ruleForm.checkPass" auto-complete="off"></el-input></el-form-item>
		<el-form-item>
			<el-button type="info" @click="submitForm('ruleForm')">注册</el-button>
			<el-button type="info" title = "点我跳转到登录界面" @click="goLogin">登录</el-button>
		</el-form-item>
	</el-form>
  </div>
</template>

<script>
export default {
   name:'register',
   data(){

       var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
 
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};

       return {
            activeName: 'second',
			ruleForm: {
				name: '',
				pass: '',
                email:'',
				checkPass: ''
			},
			rules: {
				name: [{ required: true, message: '请输入您的名称', trigger: 'blur' }, { min: 4, max: 10, message: '长度在4到10个字符', trigger: 'blur' }],
				pass: [{ required: true, validator: validatePass, trigger: 'blur' }],
				checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
			}
       }
   },

   methods:{
        submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
                    let obj = {username:this.ruleForm.name,email:this.ruleForm.email,password:this.ruleForm.pass};
                    this.$axios.post('http://119.91.81.28:1337/auth/local/register',obj).then(response =>  {
                        localStorage.setItem('username',response.data.user.username);
                        localStorage.setItem('email',response.data.user.email);
                        localStorage.setItem('token',response.data.jwt);

                        this.$message({
                            type: 'success',
                            message: '注册成功！'
					    });
                    },err => {
                        this.$message({
                          type:'warning',
                          message:'该邮箱已被注册，请重新输入'
                        })
                        
                    })
					
					// this.activeName: 'first',
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
 
		goLogin(){
            this.$router.push({
               name:'login'
            })
        }
   }
}
</script>

<style scoped>
.box{
    width:100%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-box {
    border: 1px solid #DCDFE6;
    width: 25vw;
    padding: 4vw 4vw 3vw 4vw; 
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 1vw #909399; 
  }
  .login-title {
    text-align: center;
    margin: 0 auto;
    margin-bottom:10%;
    color: #303133;
  }
</style>